<template>
  <div class="demo-function">
    <div>
      <div class="first-title">函数方法</div>
      <div class="row">
        <div class="label">desensitization</div>
        <div class="value">脱敏</div>
      </div>
      <div class="row">
        <div class="label">mask</div>
        <div class="value">脱敏</div>
      </div>
      <div class="row">
        <div class="label">maskAddress</div>
        <div class="value">地址脱敏</div>
      </div>
      <div class="row">
        <div class="label">maskIdCard</div>
        <div class="value">身份证号脱敏</div>
      </div>
      <div class="row">
        <div class="label">maskName</div>
        <div class="value">姓名脱敏</div>
      </div>
      <div class="row">
        <div class="label">maskPhone</div>
        <div class="value">手机号脱敏</div>
      </div>
      <div class="row">
        <div class="label">formatDate</div>
        <div class="value">格式化日期</div>
      </div>
      <div class="row">
        <div class="label">listToTree</div>
        <div class="value">将一维数组转化为树形数组</div>
      </div>
      <div class="row">
        <div class="label">isDate</div>
        <div class="value">是否是日期格式</div>
      </div>
    </div>
    <div>
      <div class="first-title">promise方法</div>
      <div class="row">
        <div class="label">getCodeByLabel</div>
        <div class="value">通过字典类型和label获取对应的code</div>
      </div>
      <div class="row">
        <div class="label">getCodeByLabels</div>
        <div class="value">通过字典类型和多个label获取对应的多个code</div>
      </div>
      <div class="row">
        <div class="label">getLabelByCode</div>
        <div class="value">通过字典类型和code获取对应的label</div>
      </div>
      <div class="row">
        <div class="label">getLabelByCodes</div>
        <div class="value">通过字典类型和多个code获取对应的多个label</div>
      </div>
      <div class="row">
        <div class="label">getTreeCodeByLabel</div>
        <div class="value">通过树形数据字典类型和label获取对应的code</div>
      </div>
      <div class="row">
        <div class="label">getTreeCodeByLabels</div>
        <div class="value">通过树形数据字典类型和多个label获取对应的多个code</div>
      </div>
      <div class="row">
        <div class="label">getTreeLabelByCode</div>
        <div class="value">通过树形数据字典类型和code获取对应的label</div>
      </div>
      <div class="row">
        <div class="label">getTreeLabelByCodes</div>
        <div class="value">通过字典类型和多个code获取对应的多个label</div>
      </div>
      <div class="row">
        <div class="label">getDictConfig</div>
        <div class="value">获取字典包最终配置数据</div>
      </div>
      <div class="row">
        <div class="label">getDictConfigByKey</div>
        <div class="value">获取字典包最终配置数据的某个键值</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style scoped lang="less">
.demo-function {
  padding: 16px;
  .first-title {
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    position: relative;
    color: #409eff;
    &::after {
      content: "";
      width: 4px;
      height: 16px;
      background: #409eff;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
  .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 16px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 12px 0;
    &:last-child {
      border: none;
    }
    .label {
      width: 180px;
      flex-shrink: 1;
    }
    .value {
      margin-left: 20px;
      .van-tag {
        & + .van-tag {
          margin-left: 6px;
        }
      }
    }
  }
  .btn-box {
    margin-top: 100px;
  }
}
</style>
